require('./PageEvaluatedetail.styl');
import { Boxs, NavBar, Group, TextareaField } from 'saltui';
import User from 'salt-icon/lib/User';
import People from 'images/svg/people.svg'
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const Girdview = require('components/girdview');
const classNames = require("classnames")
class Evaluatedetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            urlList: '',//图片url
            selEvaluateRank: '',//选中的评价类别
            evaluateTitle: '',//评价内容类别
            evaluateStudentList: [],//评价学生
            evaluateRankList: '',//评价类别选项
            evaluateId: '',//评价详情id
            createDate: '',//评价日期
            teacherName: '',//老师名字
            msg: ''//评价备注
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.rightText = Control.state.data.isCanEdit == "yes" ? '编辑' : '';
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    //右侧导航按钮
    handleOnRightClick() {
        let { urlList,//图片url
            selEvaluateRank,//选中的评价类别
            evaluateTitle,//评价内容类别
            evaluateStudentList,//评价学生
            evaluateRankList,//评价类别选项
            evaluateId,//评价详情id
            createDate,//评价日期
            msg//评价备注
        } = this.state;
        let data = Object.assign({}, {
            urlList,//图片url
            msg,//评价备注
            selEvaluateRank,//选中的评价类别
            evaluateTitle,//评价内容类别
            evaluateStudentList,//评价学生
            evaluateRankList,//评价类别选项
            evaluateId,//评价详情id
            createDate,//评价日期      
        })
        Control.go('/home/addevaluate/' + 'edit', { data })
    }
    render() {
        let arr = [];
        for(let item of this.state.evaluateStudentList){
            arr.push(item.name)
        }
        return (
            <div className="evaluatedetail">
                <NavBar
                    isShow={false}
                    className={classNames({"ios-nav-bar":window.isIphone})}
                    title='评价详情'
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText={this.rightText}
                />
                <Group.List className="evaluatedetail-content listitem">
                    <HBox vAlign="center">
                        <Box>
                            <People  width="15" height="15"  />
                        </Box>
                        <Box flex={1} className="t-ML6">
                            {this.state.evaluateStudentList.length > 0 && arr.join(" ")}
                        </Box>
                        {/* <Box flex={1} className="t-FAR listitem-date">
                            {this.state.createDate}
                        </Box> */}
                    </HBox>
                </Group.List>
                <div className="t-MT10 t-PR12 t-PB9 detail">
                    <Group.List className="t-LH30 t-PL19">
                        <HBox vAlign="center">
                            <Box className="detail-title">
                                {this.state.selEvaluateRank}
                            </Box>
                            <Box flex={1} className="t-ML25">
                                {this.state.evaluateTitle && this.state.evaluateTitle.name}
                            </Box>
                        </HBox>
                        <VBox hAlign="end" className="t-MT80">
                            <Box>
                                <User className="t-MR10" width="20" height="20" />{this.state.teacherName}
                            </Box>
                            <Box >
                                {this.state.createDate}
                            </Box>
                        </VBox>
                    </Group.List>
                    {this.state.urlList.length > 0 && <Girdview girdItems={this.state.urlList} />}
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetchDetail(Control.state.data)
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Evaluatedetail, Reflux.connect(Store));

module.exports = Evaluatedetail;
